<template>
  <pageContainer class="contentRole">
    <template slot="header">
      <div class="title">
        <i class="line"></i>
        <p class="text">查询条件</p>
      </div>
      <div class="search">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="demo-form-inline">
      <el-form-item label="登录地址" prop="ipaddr">
        <el-input
          v-model="queryParams.ipaddr"
          placeholder="请输入登录地址"
          clearable
          size="small"
          style="width: 240px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          size="small"
          style="width: 240px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="登录状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.sys_common_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="登录时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" size="small"  @click="handleQuery">查询</el-button>

      </el-form-item>
    </el-form>
      </div>
    </template>
    <template slot="center">
      <div class="title">
        <i class="line"></i>
        <p class="text">列表</p>
      </div>
      <div class="table" ref="table">
        <el-table
          :data="list"
          :max-height="maxHeight"
          :header-cell-style="{textAlign: 'center',color: '#fff',backgroundColor: '#223450'}"

          style="width: 100%">
          <!-- <el-table-column
            type="index"
            align="center"
            width="100"
            label="序号">
          </el-table-column> -->

          <el-table-column label="访问编号" align="center" prop="infoId" />
          <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
          <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
          <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
          <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
          <el-table-column label="操作系统" align="center" prop="os" />
          <el-table-column label="登录状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="操作信息" align="center" prop="msg" />
          <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.loginTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align="center"
            label="操作">
            <template slot-scope="scope">

              <el-button type="text" @click="handleDelete(scope.row)" style="color:red;padding:0" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template slot="bottom">
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </template>
  </pageContainer>
</template>

<script>

import pageContainer from '../../../components/pageContainer.vue'
import { list, delLogininfor, cleanLogininfor } from '@/api/logininfor'
import { dict } from '@/utils/dict'

export default {
  components: { pageContainer },
  name: 'Logininfor',
  data() {
    return {
      dict: dict,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: 'loginTime', order: 'descending' },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ipaddr: undefined,
        userName: undefined,
        status: undefined
      },
      maxHeight: 560
    }
  },
  created() {
    this.getList()
  },
  watch: {

  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true
      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
      this.handleQuery()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.infoId)
      this.multiple = !selection.length
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.infoId || this.ids
      this.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？').then(function() {
        return delLogininfor(infoIds)
      }).then(() => {
        this.queryParams.pageNum = 1
        this.getList()
      }).catch(() => {})
    },
    /** 清空按钮操作 */
    handleClean() {
      this.$confirm('是否确认清空所有登录日志数据项？').then(function() {
        return cleanLogininfor()
      }).then(() => {
        this.getList()
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('monitor/logininfor/export', {
        ...this.queryParams
      }, `logininfor_${new Date().getTime()}.xlsx`)
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.contentRole{
  .title{
    display: flex;
    align-items: center;
    height: 30px;
    .line{
      width: 5px;
      height: 25px;
      background: #409EFF;
      margin-right: 5px;
    }
    .text{
      color: #fff;
    }
  }
  .search{
    height: calc(100% - 30px);
    display: flex;
    align-items: center;
    .demo-form-inline{
      padding-left: 10px;
      :deep(.el-form-item){
        margin-bottom: 0;
      }
    }
  }
  .table{
    height: calc(100% - 40px);
    margin-top: 10px;
  }
}
/*最外层透明*/
:deep(.el-table), :deep(.el-table__expanded-cell){
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #C9E9FF;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7EC1FF;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover){
   background-color: transparent;
}
:deep(.el-table .warning-row) {
 background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table){
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;

}
:deep(.el-table tbody tr:hover > td) {
            background: rgba(51, 91, 127, 0.4) !important;
        }
   :deep(.el-input__inner){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pager li){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pager li.active){
   background: rgb(25, 133, 227);
}
:deep(.btn-prev),:deep(.el-pagination .btn-next){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pagination button:disabled){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pagination__total),:deep(.el-pagination__jump){
  color: #fff;
}
:deep(.el-table td.el-table__cell),:deep(.el-table th.el-table__cell.is-leaf){
  border-color: rgba(231,234,241,0.2);
}
:deep(.el-table::before){
  background: rgba(231,234,241,0.2);
}
:deep(.el-form-item__label){
  color: #A3B3BE;
}
:deep(.el-dialog){
  background: rgba(0,28,55,0.85);
}
:deep(.el-dialog__header){
  border-bottom: 1px solid rgba(120, 189, 255, 1);
  margin-right: 0px;
  margin-bottom:10px
}
:deep(.el-dialog__title){
  color: #41B0FF;
  font-size: 16px;
}

:deep(.el-dialog__headerbtn .el-dialog__close){
  color: rgba(70, 174, 255, 1);
}
</style>
